//state 是 Vuex 中存储应用状态的地方。它是响应式的，当状态发生变化时，视图会自动更新。
// 存储应用的数据，如用户的登录状态、购物车中的商品列表等。
// 存储全局共享的状态，如主题颜色、语言设置等。
const state = {
  value: 0,
  value2: 20
};

//mutations 是更改 Vuex store 中状态的唯一方法。每个 mutation 都有一个字符串类型的事件类型和一个回调函数。回调函数的第一个参数是 store 的状态对象。
// 修改状态，如增加或减少计数器的值。
// 更新复杂的数据结构，如数组或对象。
// 同步操作，确保状态的变化是可预测的。
const mutations = {
  add(state) {
    state.value++;
  },
  del(state) {
    state.value--;
  }
};

//actions 类似于 mutations，但它们可以包含任意异步操作。actions 不直接更改状态，而是通过提交 mutations 来更改状态。
// 执行异步操作，如从服务器获取数据。
// 在异步操作完成后提交 mutations，以更新状态。
// 处理复杂的业务逻辑，如用户登录验证。
const actions = {
  increment({ commit }) {
    commit('add');
  },
  decrement({ commit }) {
    commit('del');
  }
};

//getters 用于从 store 中派生出一些状态。getters 可以被视为 store 的计算属性。
// 计算派生状态，如过滤后的列表、总数等。
// 返回状态的一部分，如特定用户的详细信息。
// 缓存计算结果，提高性能。
const getters = {
  count: state => state.value + 1
};

//注册为一个模块
export default {
    namespaced: true,//启用模块的命名空间。启用命名空间后，模块中的状态、getters、mutations 和 actions 都会被自动加上模块名前缀，从而避免不同模块之间的命名冲突。
    state,
    mutations,
    actions,
    getters
};
